<template>
  <div class="life-index">
    <h3>生活指数</h3>
    <div class="index-container" v-if="indexData">
      <div class="index-item" v-for="(item, index) in indexData" :key="index">
        <div class="index-icon">
          <i :class="getIconClass(item.type)"></i>
        </div>
        <div class="index-info">
          <div class="index-name">{{ item.name }}</div>
          <div class="index-value">{{ item.value }}</div>
        </div>
      </div>
    </div>
    <div v-else class="loading">
      加载中...
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { getLifeIndex } from '../api/weather'

export default {
  name: 'LifeIndex',
  props: {
    city: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const indexData = ref(null)

    const fetchLifeIndex = async () => {
      try {
        const response = await getLifeIndex(props.city)
        indexData.value = response.data
        console.log('生活指数数据:', indexData.value)
      } catch (error) {
        console.error('获取生活指数失败:', error)
      }
    }

    const getIconClass = (type) => {
      const iconMap = {
        'comfort': 'fa-solid fa-face-smile',
        'sport': 'fa-solid fa-person-running',
        'carWash': 'fa-solid fa-car',
        'uv': 'fa-solid fa-sun',
        'dressing': 'fa-solid fa-shirt',
        'fishing': 'fa-solid fa-fish'
      }
      return iconMap[type] || 'fa-solid fa-circle-info'
    }

    onMounted(() => {
      fetchLifeIndex()
    })

    return {
      indexData,
      getIconClass
    }
  }
}
</script>

<style scoped>
.life-index {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 20px;
  margin: 20px 0;
}

.index-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.index-item {
  display: flex;
  align-items: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  transition: transform 0.2s;
}

.index-item:hover {
  transform: translateY(-2px);
}

.index-icon {
  font-size: 24px;
  margin-right: 10px;
  color: #4a90e2;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.index-icon i {
  display: inline-block;
  transition: transform 0.2s ease;
}

.index-item:hover .index-icon i {
  transform: scale(1.1);
}

.index-info {
  flex: 1;
}

.index-name {
  font-size: 14px;
  color: #666;
}

.index-value {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-top: 4px;
}

.loading {
  text-align: center;
  padding: 20px;
  color: #666;
}
</style> 